<template>
  <div class="chinese-showboard flex-col-center-start" ref="cnShowboard">
    <div  v-for="(lst,index) in computedHanziList"
          :key="index"
          class="chinese-showboard-row"
    >
    <div v-if="computedTextType">
      <Hanzi :han-zi="computedText(chr)"
             v-for="(chr,i) in  lst"
             :key="i"
             class="margin-row-10 margin-col-10"
      ></Hanzi>
    </div>
      <div v-if="!computedTextType">
        <div
               v-for="(chr,i) in  lst"
               :key="i"
               class="margin-row-10 margin-col-10"
               :style="{fontSize:(fontSize || 20)+'px'}"
        >
          {{computedText(chr).value}}
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">

import {computed, defineProps, onMounted, ref, watch} from 'vue'

import {RecordItem, RecordStatus} from "@/ts/record";
import Hanzi from "@/components/char/Hanzi.vue";


let props=defineProps<{
  fontSize?:number
  currIndex:number,
  textList:Array<RecordItem>
}>()

let cnShowboard=ref()
onMounted(()=>{
  // 一个大div
  // console.log(cnShowboard.value.children[0])
  // 一个汉字
  // console.log(cnShowboard.value.children[0].children[0])
  // console.log(cnShowboard.value.children[0].children[0].clientHeight)
})
// TODO cnShowboard.value.scrollTop=100 跳转方式
watch(()=>props.currIndex,(index)=>{

  // TODO 根据当前打字进度滚动，当前采用方法：每输入11个字（固定）移动一行，看情况优化

  // 汉字dom对象数组
  let hanziRefList=cnShowboard.value.children[0].children
  let height=hanziRefList[0].clientHeight
  //  偏移高度：1个汉字的高度(预设每行11个字)
  let col=11
  let offset=Math.floor(index/col)*height
  cnShowboard.value.scrollTop=offset
})


// 字符映射,不需要特殊处理的字符不用放，仅存放需要特殊处理的字符
let specialCharMap=new Map([
    [" ","_"],
    ["\n","⏎"]
])



let computedText=computed(()=>{
  return (chr:RecordItem)=>{
    let text = chr.value;
    // 特殊字符map有就返回特殊字符，没有就返回汉字
    let recordValue=specialCharMap.has(text)?specialCharMap.get(text):text
    return {
      value:recordValue,
      status:chr.status
    }
  }
})

let computedHanziList=computed(()=>{
  let lst:Array<RecordItem[]>=[]
  let tmp:Array<RecordItem>=[]
  props.textList.forEach((item,index)=>{
    tmp.push(item)
    if(item.value === '\n' || index === props.textList.length-1){
      lst.push(tmp)
      tmp=[]
    }
  })
  return lst
})
function isChinese(str:string) {
  // 使用Unicode编码范围判断是否是中文字符
  return /^[\u4e00-\u9fa5]+$/.test(str);
}
// 中文true，英文false
let computedTextType=computed(()=>{
  if(props.textList && props.textList.length > 0){
    return isChinese(props.textList[0].value)
  }
  return false
})
</script>

<style scoped lang="less">
.chinese-showboard{
  width: 100%;
  height: 70vh;
  padding: 20px;
  overflow-y: scroll;
  scroll-behavior: smooth;

  .chinese-showboard-row{
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-wrap: wrap;
  }

}
::-webkit-scrollbar {
  //滚动条整体样式,高宽分别对应横竖滚动条的尺寸
  width: 0;
  height: 13px;
}
//::-webkit-scrollbar-thumb {
//  //!*滚动条里面小方块*!*/
//
//  border-radius: 10px;
//  //-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
//  background: white;
//
//}
//::-webkit-scrollbar-track {
//  //!*滚动条里面轨道*!*/
//  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
//  border-radius: 10px;
//  background: white;
//}
</style>